<template>
  <div class="generate-container">
    <el-tabs v-model="activeTop" type="card" @tab-click="handleTop">
      <el-tab-pane label="项目1" name="1"></el-tab-pane>
    </el-tabs>
    <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="list-items">
            <div class="list-title list-title-pad10">项目名称：</div>
            <el-input placeholder="" v-model="value"></el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="list-items">
            <div class="list-title list-title-pad10">项目代码：</div>
            <el-input placeholder="" v-model="value"></el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="list-items">
            <div class="list-title list-title-pad10">子项数：</div>
            <el-input placeholder="" v-model="value"></el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="list-items">
            <div class="list-title list-title-pad10">批次前缀：</div>
            <el-input placeholder="" v-model="value"></el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="list-items">
            <div class="list-title list-title-pad10">使用区域：</div>
            <el-input placeholder="" v-model="value"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="flex-end">
            <el-button>读ID卡</el-button>
            <el-button type="primary">写ID卡</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-items">
            <div class="list-title list-title-pad10">有效月数：</div>
            <el-input placeholder="" v-model="value"></el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="list-items">
            <div class="list-title list-title-pad10">生产年份：</div>
            <el-input placeholder="" v-model="value"></el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="list-items">
            <div class="list-title list-title-pad10">生产月份：</div>
            <el-input placeholder="" v-model="value"></el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="list-items">
            <div class="list-title list-title-pad10">项目批次：</div>
            <el-input placeholder="" v-model="value"></el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="list-items">
            <div class="list-title list-title-pad10">条形码：</div>
            <el-input placeholder="" v-model="value"></el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <el-button type="primary">条形图</el-button>
        </el-col>
      </el-row>
    </div>
    <el-tabs v-model="activeTop" type="card" @tab-click="handleTop">
      <el-tab-pane label="项目参数" name="1"></el-tab-pane>
      <el-tab-pane label="曲线参数" name="2"></el-tab-pane>
    </el-tabs>
    <div class="generate-top group-border-top">
      <div class="generate-top-left group-border" style="padding:0 6px;">
        <div class="list-group">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="list-items">
                <div class="list-title list-title-pad10">预读时间(s)：</div>
                <el-input-number v-model="value" :step="1" :precision="0" :min="30"></el-input-number>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="list-items">
                <div class="list-title list-title-pad10">测试时间(s)：</div>
                <el-input-number v-model="value" :step="1" :precision="0" :min="30"></el-input-number>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="list-items">
                <el-checkbox v-model="checked">自定义二次稀释</el-checkbox>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="list-group">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="list-items">
                <el-checkbox v-model="checked">判定未加样品</el-checkbox>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="list-items">
                <div class="list-title list-title-pad10">峰个数：</div>
                <el-select v-model="value" placeholder="">
                  <el-option v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="list-items">
                <div class="list-title list-title-pad10">二次缓冲液量：</div>
                <el-input-number v-model="value" :step="1" :precision="0" :min="30"></el-input-number>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="list-group">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="list-items">
                <div class="list-title list-title-pad10">判定值：</div>
                <el-input placeholder="" v-model="value"></el-input>
              </div>
            </el-col>
            <el-col :span="8">

            </el-col>
            <el-col :span="8">
              <div class="list-items">
                <div class="list-title list-title-pad10">二次混合液量：</div>
                <el-input-number v-model="value" :step="1" :precision="0" :min="30"></el-input-number>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="list-group">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="list-items">
                <div class="list-title list-title-pad10">判定峰序号：</div>
                <el-select v-model="value" placeholder="">
                  <el-option v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="list-items">
                <div class="list-title list-title-pad10">取峰算法：</div>
                <el-select v-model="value" placeholder="">
                  <el-option v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="list-group">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="list-items">
                <el-checkbox v-model="checked">读数反转</el-checkbox>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="list-items">
                <div class="list-title list-title-pad10">反转基准值：</div>
                <el-input placeholder="" v-model="value"></el-input>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="generate-top-center">
        <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header">
          <el-table-column label="序号" align="center" width="100" fixed>
            <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
          </el-table-column>
          <el-table-column label="起点" align="center">
            <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
          </el-table-column>
          <el-table-column label="终点" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.sex == 1">男</span>
              <span v-if="scope.row.sex == 2">女</span>
            </template>
          </el-table-column>
          <el-table-column label="取值" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="generate-top-right">
        <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header">
          <el-table-column label="序号" align="center" width="100" fixed>
            <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
          </el-table-column>
          <el-table-column label="起点" align="center">
            <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
          </el-table-column>
          <el-table-column label="终点" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.sex == 1">男</span>
              <span v-if="scope.row.sex == 2">女</span>
            </template>
          </el-table-column>
          <el-table-column label="取值" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-tabs v-model="activeTop" type="card" @tab-click="handleTop" style="margin-top:6px;">
      <el-tab-pane label="子项参数" name="1"></el-tab-pane>
      <el-tab-pane label="组合输出" name="2"></el-tab-pane>
    </el-tabs>
    <div class="list-items" style="padding:10px;">
      <div class="list-title list-title-pad10">子线序号：</div>
      <el-select v-model="value" placeholder="">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="generate-top">
      <div class="generate-bottom-left group-border group-pad">
        <div class="generate-title">子项输出参数定义</div>
        <div class="list-items" style="padding:10px;">
          <div class="list-title list-title-pad10">分段模式：</div>
          <el-input placeholder="" v-model="value"></el-input>
        </div>
        <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header">
          <el-table-column label="名称" align="center" width="100" fixed>
            <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
          </el-table-column>
          <el-table-column label="单位" align="center">
            <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
          </el-table-column>
          <el-table-column label="范围小" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.sex == 1">男</span>
              <span v-if="scope.row.sex == 2">女</span>
            </template>
          </el-table-column>
          <el-table-column label="范围大" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="范围名称" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="generate-bottom-second">
        <div class="group-border group-pad">
          <div class="generate-title">TC计算参数</div>
          <div class="list-group">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="list-items">
                  <div class="list-title list-title-pad10">浓度逻辑计算：</div>
                  <el-input placeholder="" v-model="value"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="list-group">
            <el-row :gutter="20">
              <el-col :span="3">
                <div class="list-items">
                  <div class="list-title">TC1：</div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="list-items">
                  <div class="list-title">p1：</div>
                  <el-input placeholder="" v-model="value"></el-input>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="list-items">
                  <div class="list-title">p2：</div>
                  <el-input placeholder="" v-model="value"></el-input>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="list-items">
                  <div class="list-title">p3：</div>
                  <el-input placeholder="" v-model="value"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="list-group">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="list-items">
                  <div class="list-title list-title-pad10">T/C计算公式：</div>
                  <el-input placeholder="" v-model="value"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="generate-bottom-three">
        <div class="group-border group-pad">
          <div class="generate-title">样本参数</div>
          <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header">
            <el-table-column label="样本类型" align="center" width="100" fixed>
              <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
            </el-table-column>
            <el-table-column label="系数值" align="center">
              <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
            </el-table-column>
            <el-table-column label="曲线" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.sex == 1">男</span>
                <span v-if="scope.row.sex == 2">女</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="generate-bottom-right group-pad group-border ">
        <div class="list-group">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="list-items">
                  <div class="list-title list-title-pad10">T值极限：</div>
                  <el-input placeholder="" v-model="value"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="list-group">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="list-items">
                  <div class="list-title list-title-pad10">T系数：</div>
                  <el-input placeholder="" v-model="value"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="list-group">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="list-items">
                  <div class="list-title list-title-pad10">C值调节：</div>
                  <el-input placeholder="" v-model="value"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'generate',
  data() {
    return {
      activeTop: '1',
      value: '',
      options: [{ value: '1', label: '1' }, { value: '2', label: '2' }],
      tableData: [],
      checked: false
    };
  },
  mounted() {

  },
  methods: {
    handleTop(e) {

    }
  }
};
</script>

<style lang="less">
.generate-container {
  padding: 0 10px;

  .generate-top {
    display: flex;

    .generate-top-left {
      width: 50%;
    }

    .generate-top-right {
      width: 25%;
    }

    .generate-top-center {
      width: 25%;
      padding: 0 10px;
    }
  }

  .generate-bottom-left {
    width: 30%;
  }

  .generate-bottom-right {
    width: 15%;
  }

  .generate-bottom-second {
    width: 25%;
    padding: 0 5px 0 10px;
  }

  .generate-bottom-three {
    width: 30%;
    padding: 0 10px 0 5px;
  }

  .list-group {
    padding: 6px 0;
  }


  .list-items {
    display: flex;
    align-items: center;
  }

  .list-title {
    font-size: 13px;
    color: #333;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
  }

  .list-title-right {
    text-align: right;
  }

  .list-title-pad10 {
    padding-right: 10px;
    min-width: 90px;
  }

  .flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .group-border {
    border: 1px solid #eee;
    border-radius: 6px;
  }

  .group-pad {
    padding: 0 10px;
  }

  .group-border-top {
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-radius: 0 0 6px 6px;
    padding: 6px;
  }

  .generate-title {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
  }
  .el-tabs__header{
    margin:0;
  }
}
</style>